<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html基础命令</title>
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <H6>6级标题</H6>

    <p>段落文本</p>

    <a href="http://www.baidu.com" target="_blank">链接地址</a>



    <div>
      <img src="D:\djangoLearn\html\src\v2-e7f837f869f5d89d047de9d68347d315_720w.jpg" alt="小骚图">
    </div>


    <!--  内联元素 span-->
    <span style="color: blue"> 你好 </span>

    <div>
       <p>将鼠标悬停在这段文字上，<span class="hover-effect">这里会有变化</span>。</p>
    </div>

    <style>
.hover-effect {
    color: blue;
}

.hover-effect:hover {
    color: green;
}
</style>



    <div>
         <p>点击下面的按钮，<span id="myText">这段文字会消失</span>。</p>
         <button onclick="myFunction()">点击我</button>
    </div>

    <script>
function myFunction() {
    document.getElementById("myText").style.display = "none";
}
</script>


{#无序列表#}
    <ul>
        <li>niha </li>
        <li>wo</li>
        <li>asd</li>
        <li>asd</li>
        <li>xxs</li>
    </ul>
{#有序列表#}
    <ol>
        <li></li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>

    </ol>
    <br> <!-- 换行 -->

<!-- 表格-->
    <table border="20px">
        <tr>
            <td >asdasdsa</td>
            <td>asdasdsa</td>
            <td>asdasdsa</td>
        </tr>
        <tr>
            <td>asdasd</td>
            <td>asdasd</td>
            <td>asdasd</td>

        </tr>
        <tr>
            <td>asdasd</td>
            <td>asdasd</td>
            <td>asdasd</td>

        </tr>
    </table>
<style>
    table { font-family: Arial, sans-serif; border: blue;}
    td { font-size: 30px; }
</style>
    <br>
    <br>
<input>这是一个文本框</input>

<!-- 表单 -->
    <form method="get">
        <input type="get">文本框
        <br>
        <input type="button" style="width: 100px; height: 50px; background-color: aqua; margin-top: 20px">
            <div style="margin-top: 2px">
                <!--单选框-->
            <span>单选框: </span>
            <input type="radio" name="sex" value="1">
            <span>男</span>
            <input type="radio" name="sex" value="0">
            <span>女</span>
                <br>
               <!-- 复选框 -->
            <span>复选框</span>
            <input type="checkbox" name="sex" value="1">
            <span>男</span>
            <input type="checkbox" name="sex" value="0">
            <span>女</span>
        </div>
    </form>

</body>
</html>